// 需要引入snap.svg.js
let svg = Snap("#svg-canvas")  // 需要引入snap.svg.js，否则报错
let bodyJq = $("body")
let editing = false;
let editObj = null

let horizontalFirst = true;  // true: 出线先横向，false: 出线先纵向

let straight = false;  // true：出直线，false：出折线

svg.click(drawPolyline)
svg.dblclick(endDrawPolyline)


// region 绘制多段线
// 定义一个鼠标移动的操作
function mouseMoveFunPolyline(emm) {
    let ptArr = editObj.attr("points");
    let x1 = ptArr[ptArr.length - 6]
    let y1 = ptArr[ptArr.length - 5]
    if (horizontalFirst) {
        ptArr[ptArr.length - 4] = emm.offsetX;  // x2
        ptArr[ptArr.length - 3] = y1;  // y2
    } else {
        ptArr[ptArr.length - 4] = x1;  // x2
        ptArr[ptArr.length - 3] = emm.offsetY;  // y2
    }
    if (!straight) {
        ptArr[ptArr.length - 2] = emm.offsetX;  // x3
        ptArr[ptArr.length - 1] = emm.offsetY;  // y3
    } else {
        ptArr[ptArr.length - 2] = ptArr[ptArr.length - 4]
        ptArr[ptArr.length - 1] = ptArr[ptArr.length - 3]
    }
    editObj.attr({
        points: ptArr
    });
}

function drawPolyline(e) {
    if (!editing) {
        // 如果不在编辑状态，则创建一个多段线的对象
        editing = true;
        editObj = svg.polyline(e.offsetX, e.offsetY, e.offsetX, e.offsetY, e.offsetX, e.offsetY)
        editObj.attr({
            stroke: "black",
            strokeWidth: "2",
            fill: "none",
        });
        svg.mousemove(mouseMoveFunPolyline)
    } else {
        // 如果在编辑状态，再增加两个多段线的点
        let ptArr = editObj.attr("points");
        let x1 = ptArr[ptArr.length - 2]
        let y1 = ptArr[ptArr.length - 1]
        ptArr.push(x1, y1, x1, y1)
        editObj.attr({
            points: ptArr
        })
        console.log(ptArr)
    }
}

function endDrawPolyline() {
    editing = false
    svg.unmousemove(mouseMoveFunPolyline)
    let ptArr = editObj.attr("points");
    ptArr.pop()
    ptArr.pop()
    ptArr.pop()
    ptArr.pop()
    ptArr.pop()
    ptArr.pop()
    ptArr.pop()
    ptArr.pop()
    editObj.attr({
        points: ptArr
    });
    console.log(ptArr)

}

function obsoleteCurrentPolyline() {
    // 点击右键，废弃当前正在绘制的线
    if (editing) {
        editing = false;
        svg.unmousemove(mouseMoveFunPolyline)
        editObj.remove()
    }
}

function shiftFirstDirection() {
    // 切换刚刚出线的方向
    if (editing) {
        horizontalFirst = !horizontalFirst;
        let ptArr = editObj.attr("points");
        let x1 = ptArr[ptArr.length - 6]
        let y1 = ptArr[ptArr.length - 5]
        let x2 = ptArr[ptArr.length - 2]
        let y2 = ptArr[ptArr.length - 1]
        if (horizontalFirst) {
            ptArr[ptArr.length - 4] = x2;  // x2
            ptArr[ptArr.length - 3] = y1;  // y2
        } else {
            ptArr[ptArr.length - 4] = x1;  // x2
            ptArr[ptArr.length - 3] = y2;  // y2
        }
        editObj.attr({
            points: ptArr
        });
    }
}

function revertLastPoint() {
    // 撤销上次点击绘制的两点
    if (editing) {
        let ptArr = editObj.attr("points");
        // 从后向前找到四个不同的点，包含了所有和这四个点重合的点
        // 为了能够找到所有的重合的点，需要向前找到第5个不同的点
        // 但是如果总的点数不到5，将找不到第5个不同的点，这种情况将只保留第一个点
        let i = ptArr.length;  // i可以理解为除去四个不同的点之后剩下的点数*2
        let pt4 = []
        let diffPointPosCount = 0;  // 不同的点数
        while (i > 0 && diffPointPosCount < 5) {
            let ptX = ptArr[i - 2]
            let ptY = ptArr[i - 1]
            // 将不同的点添加到pt4
            if (pt4.length === 0 || pt4[pt4.length - 2] !== ptX || pt4[pt4.length - 1] !== ptY) {
                if (diffPointPosCount < 4) {
                    pt4.push(ptX);
                    pt4.push(ptY);
                }
                diffPointPosCount++;
            }
            if (diffPointPosCount < 5) {  // 在第5个点的时候，i不-2，保证i为除去四个不同的点之后剩下的点数*2
                i -= 2;
            }
        }
        let x = pt4[0];
        let y = pt4[1];
        let x0, y0;
        if (i === 0) {
            ptArr = ptArr.slice(0, 2);
            x0 = ptArr[0];
            y0 = ptArr[1];
        } else {
            ptArr = ptArr.slice(0, i);
            x0 = ptArr[i - 2];
            y0 = ptArr[i - 1];
        }
        if (horizontalFirst) {
            ptArr.push(x, y0);
            ptArr.push(x, y);
        } else {
            ptArr.push(x0, y);
            ptArr.push(x, y);
        }
        editObj.attr({
            points: ptArr
        });
        console.log(ptArr)

    }
}

function goStraight() {
    if (editing && !straight) {  // !straight用于保证只执行一次
        let ptArr = editObj.attr("points");
        ptArr[ptArr.length - 2] = ptArr[ptArr.length - 4]
        ptArr[ptArr.length - 1] = ptArr[ptArr.length - 3]
        editObj.attr({
            points: ptArr
        });
    }
    straight = true
}

// endregion

// 绑定键盘事件
let svgCanvas = $("#svg-canvas")
svgCanvas.keyup(canvasKeyUp)
svgCanvas.keydown(canvasKeyDown)

function canvasKeyUp(e) {
    e.preventDefault();
    e.stopPropagation()
    switch (e.which) {
        case 27:  // ESC
            obsoleteCurrentPolyline()
            break;
        case 83:  // s 切换出线方向
            shiftFirstDirection()
            break;
        case 65:  // a 撤销上面一点
            revertLastPoint()
            break;
        case 16:  // shift 取消出直线
            straight = !straight
            break;
        default:
            break;
    }
}

function canvasKeyDown(e) {
    e.preventDefault()
    e.stopPropagation()
    switch (e.which) {
        case 16:  // shift 出直线
            goStraight()
            break;
        default:
            break;
    }
}